<template>
    <div class="change-theme-btn" title="主题" @click="oneClickDarkMode">
        <svg-icon name="themeChange" width="20" height="20"></svg-icon>
    </div>
</template>

<script setup lang="ts">
import { toggleTheme } from "./index"
import { ref, onMounted } from 'vue'
const isDark = ref(false)
const oneClickDarkMode = (event: any) => {
    isDark.value = !isDark.value
    localStorage.setItem('isDark', JSON.stringify(isDark.value))
    toggleTheme(event)
}
onMounted(() => {
    isDark.value = document.documentElement.classList.contains('dark')
})
</script>

<style scoped lang="scss">
.change-theme-btn {
    cursor: pointer;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<style lang="scss">
html.dark {
    filter: invert(1) hue-rotate(180deg);

    img,
    video,
    .image,
    .thumb,
    .login,
    .ant-tabs-tab-active,
    .xgplayer,
    .f-scroll-rank
     {
        filter: invert(1) hue-rotate(180deg);
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2147483646;
}

html.dark::view-transition-old(root) {
    z-index: 2147483646;
}

html.dark::view-transition-new(root) {
    z-index: 1;
}
</style>